var CLASS_HOVER = "dynamic-hover-class";

$(document).ready(function() {
	$(".ui-state-default").hover(function() {
		$(this).addClass("ui-state-hover");
	}, function() {
		$(this).removeClass("ui-state-hover");
	});
	
	$("ul.ui-state-active a").hover(function() {
		$(this).addClass("ui-state-hover");
		$(this).css("color", "white");
	}, function() {
		$(this).removeClass("ui-state-hover");
		$(this).css("color", "black");
	});
	
	$(".menu").hide();
	
	$(".menu").hover(function() {
		$(this).addClass(CLASS_HOVER);
	}, function() {
		$(this).removeClass(CLASS_HOVER);

		var trigger = $(".trigger", $(this).parent().parent());
		setTimeout(function() {
			if (!trigger.hasClass(CLASS_HOVER)) {
				$(".menu", $(trigger).parent()).hide();
			}
		}, 1);
	});
	
	$(".trigger").hover(function() {
		$(this).addClass(CLASS_HOVER);

		$(".menu", $(this).parent().next()).hide();
		$(".menu", $(this).parent().prev()).hide();
		var menu = $(".menu", $(this).parent());
		if (menu.is(":hidden")) {
			menu.show();
		}
	}, function() {
		$(this).removeClass(CLASS_HOVER);

		var menu = $(".menu", $(this).parent());
		setTimeout(function() {
			if (!menu.hasClass(CLASS_HOVER)) {
				menu.hide();
			}
		}, 1);
	});
});